<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-size:12px;
}
.slide{
	width:500px; height:300px; position:relative; margin:20px auto;
}
.slide .img{
	width:100%; height:100%;
}
.slide .img a{
	width:100%; height:100%; display:none; background:#eee;
}
.slide .img a.selected{
	display:block;
}
.slide .txt{
	position:absolute; bottom:0; width:100%;
}
.slide .txt a{
	width:25%; float:left; display:inline; height:30px; line-height:30px; text-align:center; background:#ddd; font-family:Arial, Helvetica, sans-serif; color:#555; text-decoration:none; filter:alpha(opacity=80); -moz-opacity:0.8;/** Firefox 3.5即将原生支持opacity属性，所以本条属性只在Firefox3以下版本有效 ***/ -khtml-opacity: 0.8; opacity: 0.8; 
}
.slide .txt a.selected{
	background:#fff;
}
-->
</style></head>

<body>

<div class="slide">
	<div class="img">
    	<a href="#" class="selected"><img src=""/></a>
    	<a href="#"><img src=""/></a>
    	<a href="#"><img src=""/></a>
    	<a href="#"><img src=""/></a>
    </div>
    <div class="txt">
    	<a href="#" class="selected">描述文字</a>
    	<a href="#">描述文字</a>
    	<a href="#">描述文字</a>
    	<a href="#">描述文字</a>
    </div>
</div>
</body>
</html>
